<template>
    <div class="page-container">
        <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
        <div class="scale-container">
            <!-- 顶部标题 -->
            <div class="headTitle">智能网联领域数字沙盘</div>
            <div class="headButton" @click="backHome"></div>
            <div class="left1" @click="goToService('car')"></div>
            <div class="right1" @click="goToService('newEnergy')"></div>
            <!-- 左边内容 -->
            <div class="left">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">智能网联测试领域-智能化测试</div>
                    <div class="content">
                        <p class="contentTitle">聚焦<span style="font-family: '微软雅黑粗体';color: #59ceff;">辅助驾驶</span>和<span
                                style="font-family: '微软雅黑粗体';color: #59ceff;">智慧座舱</span>两大测试方向，为企业提供产品研发验证和测评认证服务支撑<span
                                style="font-family: '微软雅黑粗体';color: #59ceff;">政府部门</span>开展智能网联汽车道路测试和示范应用管理工作
                        </p>
                    </div>
                </div>
                <div class="box2">
                    <span class="title">支撑政府</span>
                    <span class="text">支持<span style="font-family: '微软雅黑粗体';">宁波市、台州市</span>开展智能网联汽车道路
                        测试和示范应用管理工作</span>
                    <div class="img1"></div>
                </div>
                <div class="box3">
                    <span class="title">辅助驾驶</span>
                    <span class="text">L0-L3级辅助驾驶相关测试评价服务</span>
                    <div class="img1"></div>
                </div>
                <div class="box4">
                    <span class="title">智慧座舱</span>
                    <span class="text">倒车影像、全景环视、DMS等智慧座舱相关 测试评价服务</span>
                    <div class="img1"></div>
                </div>
            </div>
            <!-- 中间内容 -->
            <div class="middle">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">智能网联测试领域-测试场地</div>
                    <div class="content">
                        <p class="contentTitle">
                            宁波市前湾新区智能网联汽车封闭测试区 </p>
                    </div>
                </div>
                <div class="box2">
                    <span class="text">测试场地资源丰富</span>
                    <div class="img1"></div>
                    <div class="img2"></div>
                    <div class="img3">
                        <div class="content">
                            <span style="top: 160px;
    /* position: absolute; */
    width: 32px;;
    height: 32px;;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="title">长800米</span>
                        </div>
                        <div class="content">
                            <span style="top: 160px;
    /* position: absolute; */
    width: 32px;;
    height: 32px;;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="title">两横三纵</span>
                        </div>
                        <div class="content">
                            <span style="top: 160px;
    /* position: absolute; */
    width: 32px;;
    height: 32px;;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="title">双向四车道</span>
                        </div>

                        <div class="content">
                            <span style="top: 160px;
    /* position: absolute; */
    width: 32px;;
    height: 32px;;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="title">2个十字路口</span>
                        </div>
                        <div class="content">
                            <span style="top: 160px;
    /* position: absolute; */
    width: 32px;;
    height: 32px;;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="title">3个丁字路口</span>
                        </div>
                    </div>
                    <span class="title2">高邮-嘉联汽车试验场</span>
                    <div class="img4"></div>
                    <span class="title3">昆山-花桥汽车试验场</span>
                    <div class="img5"></div>
                    <div class="img6"></div>
                </div>
            </div>
            <!-- 右边内容 -->
            <div class="right">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">智能网联测试领域-智能化测试</div>
                    <div class="content">
                        <p class="contentTitle"><span
                                style="font-family: '微软雅黑粗体';color: #59ceff;">服务能力：</span>具备整车及零部件信息安全、车载紧急呼叫测试能力，为企业提供产品研发及测试认证服务
                        </p>
                        <p class="contentTitle"><span
                                style="font-family: '微软雅黑粗体';color: #59ceff;">服务政府：</span>浙江省通信管理局网络数据安全技术支撑单位、2025浙江省通信管理局“之江铸网-2025攻防演练”实车赛道承办单位宁波市智能网联车辆道路测试与示范应用管理联席工作小组技术支撑单位
                        </p>
                    </div>
                </div>
                <div class="box2">
                    <span class="title">整车及零部件信息安全</span>
                    <div class="img1"></div>
                    <span style="top: 20px;
    left: -310px;
    position: relative;
    width: 22px;
    height: 22px;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="text">检测能力：覆盖<span style="font-family: '微软雅黑粗体';">R155/R156、GB
                            44495-2024、GB 44496-2024、GB 44464-2024</span>等合规检测能力，同时也提供研发阶段服务，涉及<span
                            style="font-family: '微软雅黑粗体';">产品咨询、需求开发、验证和确认测试</span>等。</span>
                </div>
                <div class="box3">
                    <span class="title">车载紧急呼叫</span>
                    <div class="img1"></div>
                    <span style="top: 27px;
    left: -310px;
    position: relative;
    width: 22px;
    height: 22px;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="text">检测能力：覆盖<span style="font-family: '微软雅黑粗体';">R144、EU 2017/79、EU
                            2015/758、EU 2024/1180、UAE.S 5019:2024</span>等合规检测能力，同时也提供企业产品研发阶段的<span
                            style="font-family: '微软雅黑粗体';">功能验证及认证摸底</span>测试服务。</span>
                </div>
                <div class="box4">
                    <span class="title">政府服务</span>
                    <div class="img1"></div>
                    <span style="    top: 22px;
    left: -457px;
    position: relative;
    width: 22px;
    height: 22px;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="text">支撑浙江省通信管理局完成“之江铸网-2025”网络安 全实车攻防演练活动；</span>
                    <span style="    top: 2px;
    left: -457px;
    position: relative;
    width: 22px;
    height: 22px;
    background: #49B8FF;
    border-radius: 5px;"></span><span class="text2">支撑宁波市无人装备小车市场准入，完成多款无人物流 车信息安全测试。</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
//路由
import { useRouter } from 'vue-router'
const router = useRouter()
//跳转路由
const backHome = () => {
    router.push({ name: 'ningbo' })
}
//跳转路由
const goToService = (item) => {
    router.push({ name: item })
}
</script>
<style scoped>
/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
    width: 6240px;
    /* 新目标宽度 */
    height: 1456px;
    /* 新目标高度 */
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
    width: 9600px;
    /* 原始宽度不变 */
    height: 2240px;
    /* 原始高度不变 */
    transform: scale(0.65);
    /* 新缩放比：6240/9600=0.65，1456/2240=0.65（宽高比完全一致） */
    transform-origin: 0 0;
    /* 保持左上角为缩放原点，避免位置偏移 */
    position: relative;
}

.headTitle {
    text-align: center;
    position: relative;
    top: -24px;
    font-size: 130px;
    /* left: 40.5%; */
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.left1 {
    z-index: 999;
    cursor: pointer;
    top: 45%;
    left: 10px;
    position: absolute;
    width: 94px;
    height: 258px;
    background-image: url("/imgs/home/left1.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.right1 {
    z-index: 999;
    cursor: pointer;
    position: absolute;
    top: 45%;
    right: 10px;
    width: 94px;
    height: 258px;
    background-image: url("/imgs/home/right1.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.headButton {
    cursor: pointer;
    display: flex;
    float: inline-end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 78px;
    height: 78px;
    background-image: url("/imgs/ningbo/cancel.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.left {
    display: flex;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            position: absolute;
            top: 402px;
            left: 160px;
            width: 2985px;
            height: 295px;
            background-image: url("/imgs/ningbo/discharge/矩形 933 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentTitle {
                width: 57%;
                margin-top: 80px;
                margin-left: 160px;
                font-family: "微软雅黑常规";
                font-size: 47px;
                color: #FFFFFF;
            }
        }
    }

    .box2 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 183px;
        top: 722px;
        display: flex;
        width: 946px;
        height: 1424px;
        background-image: url("/imgs/ningbo/intelligent/矩形 937 拷贝(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title {
            position: relative;
            left: 290px;
            top: -100px;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 53px;
            color: #FFFFFF;
        }

        .text {
            position: relative;
            top: -80px;
            padding: 0 80px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
            line-height: 56px;
        }

        .img1 {
            width: 879px;
            height: 973px;
            background-image: url("/imgs/ningbo/intelligent/组 7796 拷贝 2.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

    }

    .box3 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 1169px;
        top: 722px;
        display: flex;
        width: 946px;
        height: 1424px;
        background-image: url("/imgs/ningbo/intelligent/矩形 937 拷贝(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title {
            position: relative;
            left: 290px;
            top: -110px;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 53px;
            color: #FFFFFF;
        }

        .text {
            position: relative;
            top: -80px;
            padding: 0 80px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
            line-height: 56px;
        }

        .img1 {
            width: 879px;
            height: 973px;
            background-image: url("/imgs/ningbo/intelligent/组 7796 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }
    }

    .box4 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 2163px;
        top: 722px;
        display: flex;
        width: 946px;
        height: 1424px;
        background-image: url("/imgs/ningbo/intelligent/矩形 937 拷贝(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title {
            position: relative;
            left: 290px;
            top: -100px;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 53px;
            color: #FFFFFF;
        }

        .text {
            position: relative;
            top: -80px;
            padding: 0 80px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
            line-height: 56px;
        }

        .img1 {
            width: 879px;
            height: 973px;
            background-image: url("/imgs/ningbo/intelligent/组 7796 拷贝 3(1).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }
}

.middle {
    display: flex;
    position: absolute;
    left: 3109px;
    top: 202px;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            position: absolute;
            top: 202px;
            left: 160px;
            width: 3049px;
            height: 203px;
            background-image: url("/imgs/ningbo/intelligent/矩形 933 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentTitle {
                text-align: center;
                margin-top: 60px;
                margin-left: 100px;
                font-family: "微软雅黑粗体";
                font-weight: bold;
                font-size: 56px;
                color: #FFFFFF;
                line-height: 83px;
            }
        }
    }

    .box2 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 183px;
        top: 415px;
        display: flex;
        width: 2990px;
        height: 1495px;
        background-image: url("/imgs/ningbo/intelligent/矩形 937.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .text {
            position: absolute;
            /* top: 70px; */
            left: 50px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
            writing-mode: vertical-rl;

        }

        .img1 {
            position: absolute;
            top: 40px;
            left: 134px;
            width: 1117px;
            height: 695px;
            background-image: url("/imgs/ningbo/intelligent/图片35.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .img2 {
            position: absolute;
            top: 40px;
            left: 1300px;
            width: 1117px;
            height: 695px;
            background-image: url("/imgs/ningbo/intelligent/图片36.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .img3 {
            position: absolute;
            top: 40px;
            left: 2466px;
            width: 477px;
            height: 695px;
            background-image: url("/imgs/ningbo/intelligent/矩形 937 拷贝@2x.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .content {
                justify-content: center;
                align-items: center;
                position: relative;
                display: flex;
                top: 14%;

                .title {
                    margin-left: 30px;
                    width: 285px;
                    font-family: "微软雅黑常规";
                    font-weight: 400;
                    font-size: 49px;
                    color: #FFFFFF;
                    line-height: 99px;
                }
            }
        }

        .title2 {
            left: 400px;
            position: absolute;
            top: 774px;
            width: 507px;
            z-index: 999;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 47px;
            color: #FFFFFF;
            line-height: 91px;
        }

        .title3 {
            z-index: 999;
            top: 80px;
            position: relative;
            width: 504px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 47px;
            color: #FFFFFF;
            line-height: 91px;
        }

        .img4 {
            position: absolute;
            top: 773px;
            left: 134px;
            width: 952px;
            height: 700px;
            background-image: url("/imgs/ningbo/intelligent/图片37.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .img5 {
            position: absolute;
            top: 773px;
            left: 1134px;
            width: 645px;
            height: 700px;
            background-image: url("/imgs/ningbo/intelligent/图片38.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .img6 {
            position: absolute;
            top: 773px;
            right: 50px;
            width: 1117px;
            height: 695px;
            background-image: url("/imgs/ningbo/intelligent/组 7815.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }

    .box3 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 2423px;
        top: 520px;
        display: flex;
        width: 726px;
        height: 1334px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝(5).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            display: flex;
            width: 635px;
            height: 618px;
            background-image: url("/imgs/ningbo/car/矩形 937 拷贝 7.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            span {
                padding: 35px;
                width: 573px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 35px;
                color: #FFFFFF;
                line-height: 50px;
            }
        }

        .img2 {
            display: flex;
            width: 635px;
            height: 472px;
            background-image: url("/imgs/ningbo/car/矩形 937 拷贝 7.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            span {
                padding: 35px;
                width: 567px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 35px;
                color: #FFFFFF;
                line-height: 50px;
            }
        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }
    }

}

.right {
    display: flex;
    position: absolute;
    flex-direction: column;
    left: 6300px;
    top: 200px;
    display: flex;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            flex-direction: column;
            position: absolute;
            top: 202px;
            left: 160px;
            width: 3014px;
            height: 375px;
            background-image: url("/imgs/ningbo/intelligent/矩形 933 拷贝 3(2).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentTitle {
                width: 92%;
                /* margin-top: 80px; */
                margin-left: 160px;
                font-family: "微软雅黑常规";
                font-size: 47px;
                color: #FFFFFF;
            }
        }
    }

    .box2 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 183px;
        top: 610px;
        display: flex;
        width: 821px;
        height: 1324px;
        background-image: url("/imgs/ningbo/intelligent/矩形 937 拷贝(3).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title {
            position: relative;
            left: 89px;
            top: -59px;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 53px;
            color: #FFFFFF;
        }

        .text {
            top: -42px;
            left: 31px;
            position: relative;

            padding: 0 100px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
        }

        .img1 {
            position: relative;
            top: -42px;
            width: 754px;
            height: 829px;
            background-image: url("/imgs/ningbo/intelligent/图片28.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

    }

    .box3 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 1049px;
        top: 610px;
        display: flex;
        width: 820px;
        height: 1324px;
        background-image: url("/imgs/ningbo/intelligent/矩形 937 拷贝(4).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title {
            left: 179px;
            position: relative;
            top: -51px;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 53px;
            color: #FFFFFF;
        }

        .text {
            position: relative;
            left: 30px;
            top: -36px;

            padding: 0 100px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
        }

        .img1 {
            position: relative;
            top: -30px;
            width: 754px;
            height: 829px;
            background-image: url("/imgs/ningbo/intelligent/图片30.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }
    }

    .box4 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 1912px;
        top: 610px;
        display: flex;
        width: 1186px;
        height: 1324px;
        background-image: url("/imgs/ningbo/intelligent/矩形 937 拷贝(2).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title {
            position: relative;
            left: 410px;
            top: -57px;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 53px;
            color: #FFFFFF;
        }

        .text {
            width: 1000px;
            position: relative;
            top: -40px;
            padding: 0 80px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
        }

        .text2 {
            width: 1000px;
            position: relative;
            top: -60px;
            padding: 0 80px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 33px;
            color: #FFFFFF;
        }

        .img1 {
            position: relative;
            top: -46px;
            width: 1117px;
            height: 831px;
            background-image: url("/imgs/ningbo/intelligent/图片34.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }
}
</style>